<script setup>
import {onMounted, reactive, ref} from "vue";
import axios from "axios";

onMounted(function () {
//   加载数据  链式调用
  axios.get("https://mock.apifox.com/m1/2893111-0-default/emps")
      .then(function (res) {
        // {}
        const arr = res.data.data
        tableData.value = arr
      })
})

const formInline = reactive({
  user: '',
  region: '',
  date: '',
})

const onSubmit = () => {
  console.log('submit!')
}

const tableData = ref([
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-08',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-06',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-07',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
])

const handleSelectionChange = (val) => {
  multipleSelection.value = val
}

const multipleSelection = ref([])

const currentPage4 = ref(4)
const pageSize4 = ref(100)
const disabled = ref(false)
const background = ref(false)
const small = ref(false)

const handleSizeChange = (number) => {
  console.log(`${number} items per page`)
}
const handleCurrentChange = (number) => {
  console.log(`current page: ${number}`)
  // 加载下一页的数据
}

</script>

<template>
  <el-form :inline="true" :model="formInline" class="demo-form-inline">
    <el-form-item label="姓名">
      <el-input v-model="formInline.user" placeholder="请输入员工姓名" clearable/>
    </el-form-item>
    <el-form-item label="性别">
      <el-select
          style="width: 200px"
          v-model="formInline.region"
          placeholder="请选择"
          clearable>
        <el-option label="Zone one" value="shanghai"/>
        <el-option label="Zone two" value="beijing"/>
      </el-select>
    </el-form-item>
    <el-form-item label="入职时间">
      <el-date-picker
          v-model="formInline.date"
          type="daterange"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
      />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">查询</el-button>
    </el-form-item>
  </el-form>

  <el-button type="primary">新增员工</el-button>
  <el-button type="primary">批量删除</el-button>

  <el-table
      ref="multipleTableRef"
      :data="tableData"
      style="width: 100%"
      @selection-change="handleSelectionChange">
    <el-table-column type="selection" width="55"/>
    <el-table-column label="姓名" width="120">
      <template #default="scope">{{ scope.row.name }}</template>
    </el-table-column>
    <el-table-column property="image" label="图像" width="120">
      <template #default="scope">
        <img :src="scope.row.image" alt="" style="width: 20px;">
      </template>
    </el-table-column>
    <el-table-column property="gender" label="性别" show-overflow-tooltip/>
    <el-table-column property="job" label="职位" width="120"/>
    <el-table-column property="age" label="年龄" width="120"/>
    <el-table-column property="name" label="操作" width="120">
      <template #default="scope">
        <el-button type="text">编辑</el-button>
        <el-button type="text">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <br>
  <el-pagination
      v-model:current-page="currentPage4"
      v-model:page-size="pageSize4"
      :page-sizes="[100, 200, 300, 400]"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout="jumper, total, sizes, prev, pager, next"
      :total="400"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
  />
</template>
